<template>
  <div class="app-container">
    <div class="main-content1">
      <div id="main" style="width: 100%;height:400px;"></div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/tjbb/goods";
import * as echarts from "echarts"

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      listLoading: true,
      myChart: null,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        console.log(response);
        let arrayData = response.data.rows.map((item) => item.day);
        let arrayOrders = response.data.rows.map((item) => item.orders); //订单量
        let arrayProducts = response.data.rows.map((item) => item.products); //下单货品数量
        let arrayAmount = response.data.rows.map((item) => item.amount); //下单货品总额
        // 确保DOM元素存在
        var dom = document.getElementById("main")
        if (!dom) {
          console.error("DOM元素#main未找到")
          return
        }
        this.myChart = echarts.init(document.getElementById("main"))
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单量', '下单货品数量', '下单货品总额']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: arrayData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '订单量',
              type: 'line',
              stack: 'Total',
              smooth: true,
              data: arrayOrders
            },
            {
              name: '下单货品数量',
              type: 'line',
              stack: 'Total',
              smooth: true,
              data: arrayProducts
            },
            {
              name: '下单货品总额',
              type: 'line',
              stack: 'Total',
              smooth: true,
              data: arrayAmount
            },
          ],
          color: ['#27D7B3', '#83C5F3', '#FA6E86', '#EDBD95']
        };
        this.myChart.setOption(option)
        this.listLoading = false;
      });
    },
  },
};
</script>
